<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>鲅鱼圈便民信息发布管理系统</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${s.base}/css/bootstrap.4.0.css" type="text/css" />
<link rel="stylesheet" href="${s.base}/css/app.v2.css" type="text/css" />
  <link rel="stylesheet" href="${s.base}/css/bootstrap-table.css" type="text/css" />

</head>

<body>
<section class="vbox">
          <section class="scrollable padder">
            ${headTitle}
            <div class="m-b-md">
              <h3 class="m-b-none"></h3>
            </div>
            <section class="panel panel-default">
              <header class="panel-heading font-bold">查询条件</header>
              <div class="panel-body col-lg-12">
                <form class="form-inline col-lg-12" role="form">
                  <label class="control-label" for="title" STYLE="line-height: 34px;">标题</label>
                  <div class="control-label m-l">
                    <input type="text" class="form-control"  id="title" placeholder="请输入标题">
                  </div>
                  <button type="button" id="SelectEntity" class="btn btn-default m-l-lg" >搜索</button>
                  <a href="javaScript:void(0);" id="AddEntity" class="btn btn-success m-l" data-toggle="modal">添加</a>
                </form>
              </div>
            </section>
            <table class="table table-striped b-t b-light text-sm" id="table">
            </table>
          </section>
        </section>
<script src="${s.base}/js/jquery-3.2.0.min.js"></script>
<script src="${s.base}/js/layer/layer.js"></script>
<script src="${s.base}/js/layer/commont.js"></script>
<script src="${s.base}/js/bootstrap.4.0.js"></script>
<script src="${s.base}/js/bootstrap-table.js"></script>
<script src="${s.base}/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">



    (function(){
        var $table = $('#table');
        var actionEvents = {
            'click .show': function (e, value, row, index) {
                layer.open({
                    type: 2,
                    title: '通知查看',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['430px', '500px'], //宽高
                    content: ['${s.base}/baseNote/SelectEntity?noteId='+row.noteId, 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            }
        };
        $(function(){
            initTable();
            /** 查询 */
            $("#SelectEntity").on("click", function(e){
                var title=$("#title").val();
                $table.bootstrapTable("refresh",{query:{title: title}});
            });
        });
        /** 初始化表格数据 */
        function initTable() {
            $table.bootstrapTable({
                method: 'post',
                url: '/baseNote/JsonList',
                striped: true,     //使表格带有条纹
                pagination: true, //在表格底部显示分页工具栏
                pageSize: 1,
                pageNumber: 1,
                pageList: [10, 20, 50, 100, 200, 500],
                idField: "noteId",  //标识哪个字段为id主键
                sidePagination: "server",//表格分页的位置
                contentType: "application/x-www-form-urlencoded", //解决POST提交问题
                queryParams:queryParams,
                onLoadSuccess:function (data) {
                    if (data.total==0){
                        //layer.msg('未查询到数据', {icon: 6,time: 3*1000});
                        $table.bootstrapTable("removeAll");
                    }
                }, //参数
                queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
                toolbar: "#toolbar", //设置工具栏的Id或者class
                columns:  [{
                    title: '序号',
                    width:'10%',
                    align:'center',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },{
                    field: 'title',
                    title: '题目',
                    align: 'center',
                    width:'45%'
                },{
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    width:'10%',
                    formatter: function (value, row, index) {
                        if(row.state=="Y"){
                            return "已读";
                        }else{
                            return "未读";
                        }
                    }
                },{
                    field: 'sendname',
                    title: '发布人',
                    align: 'center',
                    width:'10%'
                }, {
                    field: 'createtime',
                    title: '发布时间',
                    align: 'center',
                    width:'15%'
                } , {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    width:'10%',
                    formatter: actionFormatter,
                    events: actionEvents
                }], //列
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#table').bootstrapTable('removeAll');
                },
            });
        }
      /*封装查询参数*/
        function queryParams(params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.limit,   //页面大小
                pageNum: params.offset  //页码
            };
            return temp;
        }
        /**
         *  table最后一列的操作
         */
        function actionFormatter(value, row, index) {
            return [
                '<a href="javaScript:void(0);" class="show"  data-toggle="class">查看</a> '
            ].join('');
        }
    })(jQuery);

</script>
</body>
</html>
